<template>
  <!--pages/category/category.wxml-->

  <view class="container">
  <!-- 头部搜索区 -->
    <view class="search-bar">
      <view class="search-box" @tap="toSearchPage">
        <image src="/static/images/icon/search.png" class="search-img"></image>
        <text class="sear-input">搜索您想要的商品</text>
      </view>
    </view>
  <!-- 滚动内容区 -->
    <view class="main">
      <!-- 左侧菜单start -->
      <scroll-view scroll-y="true" class="leftmenu">
        <block v-for="(item, index) in categoryList" :key="index">
          <view :class="'menu-item ' + (selIndex==index?'active':'') + ' '" :data-index="index" :data-id="item.categoryId" @tap="onMenuTab">
            {{item.categoryName}}
          </view>
        </block>
        <view v-if="!categoryList || !categoryList.length" class="ca-empty">{{categoryList && categoryList.length ? '该分类下暂无商品' : '暂无商品'}}</view>
      </scroll-view>
      <!-- 左侧菜单end -->

      <!-- 右侧内容start -->
      <scroll-view scroll-y="true" class="rightcontent">
<!--        <view class="adver-map">-->
<!--          <view class="item-a">-->
<!--              <image :src="categoryImg" mode="widthFix"></image>-->
<!--          </view>-->
<!--        </view>-->
      <!-- 子分类 -->
      <view class="th-cate-con" v-if="subCategoryList.length">
        <block v-for="(thCateItem, index) in subCategoryList" :key="index">
            <view class="sub-category">
              <view
                class="sub-category-item"
                :data-categoryid="thCateItem.categoryId"
                :data-parentid="thCateItem.parentId"
                @tap="toCatePage"
              >
                <image :src="thCateItem.pic" class="more-pic" ></image>
                <text>{{ thCateItem.categoryName }}</text>
              </view>
            </view>
        </block>
      </view>
        <view v-else class="cont-item empty">该分类下暂无子分类~</view>
      </scroll-view>
      <!-- 右侧内容end -->
    </view>

  </view>
  </template>

  <script module="wxs" lang="wxs" src="../../wxs/number.wxs"></script>

  <script>
  var http = require("../../utils/http.js");
  var config = require("../../utils/config.js");

  export default {
    data() {
      return {
        selIndex: 0,
        categoryList: [],
      subCategoryList: [],
        productList: [],
        categoryImg: '',
        parentId: '',  
		productions: [],  //分类下的直属产品
		categoryId: 0,
		current: 1
      };
    },
    components: {},
    props: {},
	
	
	/**
		 * 页面上拉触底事件的处理函数
		 */
	onReachBottom: function() {
	  //if (this.current < this.pages) {
	    this.current = this.current + 1
	    this.getProductions()
	  //}
	},

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
      var ths = this; //加载分类列表

      var params = {
        url: "/category/categoryInfo",
        method: "GET",
        data: {
          parentId: ''
        },
        callBack: function (res) {
          ths.setData({
            categoryImg: res.children[0].pic,
            categoryList: res.children
          });
		  this.categoryId=res.children[0].categoryId
          ths.getProdList(res.children[0].categoryId);
      ths.parentId = ths.categoryList[0].categoryId
        }
      };
      http.request(params);
    },
    methods: {
		getProductions() {
		  this.isLoaded = false
		  
		  var params = {
		    url: "/prod/pageProd",
		    method: 'GET',
		    data: {
				categoryId: this.parentId,
				current: this.current,
				size: 10,
				sort: 0,
				isAllProdType: true
		    },
		    callBack: res => {
		      this.isLoaded = true
		      this.setData({
		        productions: res.current == 1 ? res.records : this.productions.concat(res.records),
		        current: res.current,
		        pages: res.pages
		      })
		    }
		  }
		  http.request(params)
		},
      /**
       * 分类点击事件
       */
      onMenuTab: function (e) {
        var id = e.currentTarget.dataset.id;
        var index = e.currentTarget.dataset.index; // this.getProdList(id);

		this.categoryId=this.categoryList[index].categoryId;
        this.getProdList(this.categoryList[index].categoryId);
      this.parentId = this.categoryList[index].categoryId
        this.setData({
          categoryImg: this.categoryList[index].pic,
          selIndex: index
        });
      },
      // 跳转搜索页
      toSearchPage: function () {
        uni.navigateTo({
          url: '/pages/search-page/search-page'
        });
      },

      getProdList(categoryId) {
        //加载分类列表
        var params = {
          url: "/category/categoryInfo",
          method: "GET",
          data: {
            parentId: categoryId
          },
          callBack: res => {
            this.setData({
              subCategoryList: res.children,
			  productions: res.productions.records
            });
          }
        };
        http.request(params);
      },

    // 跳转子分类商品页面
    toCatePage: function(e) {
      const {
        parentid,
        categoryid,
      } = e.currentTarget.dataset;
      uni.navigateTo({
        url: `/pages/sub-category/sub-category?parentId=${this.parentId}&categoryId=${categoryid}`
      });
    }
    }
  };
  </script>
  <style>
  @import "./category.css";
  </style>
